<template>
	<el-container style="height:calc(100vh); border: 1px solid #eee"> <!-- 外部容器 -->
	  <el-aside width="200px" >
	    <el-menu router
		  default-active="$route.path" unique-opened>
	      <el-submenu index="1">
	        <template slot="title"><i class="el-icon-user-solid"></i>用户管理</template>
	          <el-menu-item  index="/root/user">全部用户</el-menu-item>
	          <el-menu-item  index="/root/userrank">用户权限管理</el-menu-item>
			  <el-menu-item  index="/root/state">用户状态管理</el-menu-item>
	      </el-submenu>
	      <el-submenu index="2">
	        <template slot="title"><i class="el-icon-menu"></i>商品管理</template>
	          <el-menu-item index="/root/commodity">全部商品</el-menu-item>
			  <el-menu-item index="/root/commoditytype">商品类型管理</el-menu-item>
			  <el-menu-item index="/root/cygrounding">上下架商品管理</el-menu-item>
	      </el-submenu>
	      <el-submenu index="3">
	        <template slot="title"><i class="el-icon-document"></i>订单管理</template>
	          <el-menu-item index="3-1">全部订单</el-menu-item>
	          <el-menu-item index="3-2">待支付订单</el-menu-item>
			  <el-menu-item index="3-3">以付款订单</el-menu-item>
			  <el-menu-item index="3-4">完结订单</el-menu-item>
	      </el-submenu>
		  <el-submenu index="4">
		    <template slot="title"><i class="el-icon-coin"></i>支付管理</template>
		      <el-menu-item index="4-1">全部支付订单</el-menu-item>
		      <el-menu-item index="4-2">待支付订单</el-menu-item>
			  <el-menu-item index="4-3">以支付订单订单</el-menu-item>
		  	  <el-menu-item index="4-4">超时支付订单</el-menu-item>
		  </el-submenu>
		  <el-submenu index="5">
		    <template slot="title"><i class="el-icon-film"></i>首页模块管理</template>
		      <el-menu-item index="5-1">首页轮播图模块管理</el-menu-item>
		      <el-menu-item index="5-2">首页手机模块管理</el-menu-item>
		  	  <el-menu-item index="5-3">首页智能穿戴模块管理</el-menu-item>
		  	  <el-menu-item index="5-5">首页日用百货管理</el-menu-item>
		  </el-submenu>
	    </el-menu>
	  </el-aside>
	  <!-- 右侧 -->
	  <el-container>
	    <el-header style="text-align: right; font-size: 12px">
			<span class="logo-text">小米商城后台管理系统</span>
			<span class="user-text">管理员  :  {{name}}</span>
		  <el-dropdown>
		    <i class="el-icon-setting" style="margin-right: 15px"></i>
		    <el-dropdown-menu slot="dropdown">
		      <el-dropdown-item @click.native="exit()">退出系统</el-dropdown-item>
		    </el-dropdown-menu>
		  </el-dropdown>
	    </el-header>
	    <el-main>
	    <router-view></router-view>
		</el-main>
	  </el-container>
	  <gly></gly>  <!-- 引入js -->
	</el-container>
</template>

<script>
 export default {
    data() {
      return {
		name:""
      }
    },
	created(){  //钩子函数，初始化渲染数据
		this.name = JSON.parse(sessionStorage.getItem('user')).name
	},
	components: {
	  gly: {
	   render(createElement) {
	    return createElement(
	     'script',
	     {
	      attrs: {
	       type: 'text/javascript',
	       src: '../../static/js/root.js',
	      },
	     },
	    );
	   },
	  },
	 },
	 methods:{
		 exit(){
			 this.$message({
				 message: '退出成功',
				 type: 'success',
				 center:true,
				 duration:1000,
			 })
			 setTimeout(()=>{
				  this.$router.push('/index')
			 },1200)
		 },

	 }
  };
</script>
<style scoped>
	@import url('../../static/css/root.css');
</style>
